<template>
  <div class="dashboard">
    <WorkbenchHeader v-if="isSkeleton" />
    <!-- 1.顶部数字的数据展示 -->
    <el-row v-if="dashboardStore.amountList.length" :gutter="10">
      <template v-for="item in dashboardStore.amountList" :key="item.amount">
        <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6">
          <count-card v-bind="item" :isSkeleton="false" />
        </el-col>
      </template>
    </el-row>
    <el-row v-else-if="!dashboardStore.amountList.length" :gutter="10">
      <template v-for="item in 4" :key="item.amount">
        <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6">
          <count-card v-bind="item" :isSkeleton="true" />
        </el-col>
      </template>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="7" :xs="24" :sm="10" :md="7" :lg="7">
        <hmyCard title="分类商品数量(饼图)" :isSkeleton="!isSkeleton">
          <PieEchart :pieData="pieData"></PieEchart>
        </hmyCard>
      </el-col>
      <el-col :span="10" :xs="24" :sm="14" :md="10" :lg="10">
        <hmyCard title="不同城市商品销量" :isSkeleton="!isSkeleton">
          <MapEchart :mapData="mapData"></MapEchart>
        </hmyCard>
      </el-col>
      <el-col :span="7" :xs="24" :sm="12" :md="7" :lg="7">
        <hmyCard title="分类商品数量(玫瑰图)" :isSkeleton="!isSkeleton">
          <RoseEchart :roseData="pieData"></RoseEchart>
        </hmyCard>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12">
        <hmyCard title="分类商品的销量" :isSkeleton="!isSkeleton">
          <LineEchart v-bind="lineData"></LineEchart>
        </hmyCard>
      </el-col>
      <el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12">
        <hmyCard title="分类商品的收藏" :isSkeleton="!isSkeleton">
          <BarEchart v-bind="barData"></BarEchart>
        </hmyCard>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import useDashboard from '@/stores/main/analysis/dashboard'
import WorkbenchHeader from './cpns/WorkbenchHeader.vue'
import CountCard from './cpns/count-card.vue'
import hmyCard from '@/base-ui/card'
import {
  PieEchart,
  RoseEchart,
  LineEchart,
  BarEchart,
  MapEchart
} from '@/components/page-echarts'

const dashboardStore = useDashboard()
dashboardStore.initDashboardDataAciton()

const pieData = computed(() => {
  const categoryCount = dashboardStore.categoryCount
  const transformCategoryCount = categoryCount.map((item: any) => {
    return {
      name: item.name,
      value: item.goodsCount
    }
  })
  return transformCategoryCount
})

const mapData = computed(() => {
  return dashboardStore.addressSale.map((item: any) => {
    return { name: item.address, value: item.count }
  })
})

const lineData = computed(() => {
  const xLabels = []
  const values = []
  const categorySale = dashboardStore.categorySale as any
  for (const item of categorySale) {
    xLabels.push(item.name)
    values.push(item.goodsSale)
  }
  return { xLabels, values }
})

const barData = computed(() => {
  const xLabels = []
  const values = []
  const categoryFavor = dashboardStore.categoryFavor as any
  for (const item of categoryFavor) {
    xLabels.push(item.name)
    values.push(item.goodsFavor)
  }
  return { xLabels, values }
})

const isSkeleton = computed(() => {
  console.log(!!pieData.value.length && !!mapData.value.length)
  return !!pieData.value.length && !!mapData.value.length
})
</script>

<style lang="less" scoped>
.el-col {
  margin-bottom: 20px;
}
</style>
